<template>
  <el-row :gutter="10" class="mb-0! !h-full">
    <el-col :xs="24" :sm="12" :md="10" :lg="7" :xl="6" v-if="!isSetUserInfo">
      <MemberSearch v-if="!isSetUser" @set-user-info="handleSetUserInfo" />
      <template v-else>
        <User
          v-if="props.backScreen == '0'"
          @buy-member-ship="handleBuyMemberShip"
          @set-user-info="handleSetUserInfo"
        />
        <User
          v-if="props.backScreen == '1'"
          @buy-member-ship="handleBuyMemberShip"
          @set-user-info="handleSetUserInfo"
        >
          <template #backButton>
            <el-button
              @click="goReturnUrl('cancel')"
              size="large"
              plain
              type="primary"
              class="w-full custom-text-18 !h-50px"
            >
              返回
            </el-button>
          </template>
        </User>
      </template>
    </el-col>
    <el-col :xs="24" :sm="12" :md="10" :lg="7" :xl="6" v-if="isSetUserInfo">
      <UserForm
        ref="userFormRef"
        @back="
          () => {
            isSetUserInfo = false
          }
        "
      />
    </el-col>
    <el-col :xs="24" :sm="12" :md="14" :lg="17" :xl="18">
      <div class="pos-relative !h-full">
        <el-row :gutter="10" class="!h-full" v-if="props.screen == '0'">
          <el-col :xs="8" :sm="9" :md="7" :lg="3" :xl="3">
            <div>
              <slot name="left"></slot>
            </div>
          </el-col>
          <el-col :xs="16" :sm="15" :md="17" :lg="21" :xl="21">
            <div>
              <slot name="content"></slot>
            </div>
          </el-col>
        </el-row>
        <el-row class="!h-full" v-if="props.screen == '1'">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div>
              <slot name="content"></slot>
            </div>
          </el-col>
        </el-row>
        <div class="pos-absolute !w-full !h-full top-0" v-show="isSetList">
          <MemberList />
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
defineOptions({ name: 'ShopSales' })
import { propTypes } from '@/utils/propTypes'

import User from '@/views/shop/components/member/user/index.vue'
import MemberSearch from '@/views/shop/components/member/user/memberSearch.vue' //会员查询
import MemberList from '@/views/shop/components/member/user/memberList.vue' //会员列表
import UserForm from './components/UserForm.vue'
/** 门店会员信息 */
import { useShopUserStoreWithOut } from '@/store/modules/shop/user'
const shopUserStore = useShopUserStoreWithOut()

const isSetUser = computed(() => {
  return shopUserStore.getIsSetUser
})
/** 新增 修改逻辑 */
const userFormRef = ref()
const isSetUserInfo = ref(false)
const handleSetUserInfo = (type: string, id?: number) => {
  console.log(type)
  console.log(id)
  isSetUserInfo.value = true
  nextTick(() => {
    userFormRef.value.open(type, id)
  })
}
const emits = defineEmits(['buyMemberShip'])
const props = defineProps({
  screen: propTypes.string.def('0'), // 0 三栏布局（销售等） 1 两栏布局（还款）
  backScreen: propTypes.string.def('0') // 0 清除会员信息（销售等） 1 关闭标签（还款）
})
const handleBuyMemberShip = () => {
  emits('buyMemberShip')
}
/** 门店会员列表查询 */
import { useShopMemberListStoreWithOut } from '@/store/modules/shop/memberList'
const shopMemberListStore = useShopMemberListStoreWithOut()

const isSetList = computed(() => {
  return shopMemberListStore.getIsSetList
})
/**
 * 回到业务的 URL
 *
 * @param payResult 支付结果
 *                  ① success：支付成功
 *                  ② cancel：取消支付
 *                  ③ close：支付已关闭
 */
const returnUrl = ref<string | undefined>(undefined) // 支付完的回调地址
const route = useRoute() // 路由

const { push, currentRoute } = useRouter() // 路由
import { useTagsViewStore } from '@/store/modules/tagsView'

const { delView } = useTagsViewStore() // 视图操作

const goReturnUrl = (payResult) => {
  // 未配置的情况下，只能关闭
  if (!returnUrl.value) {
    delView(unref(currentRoute))
    return
  }

  const url =
    returnUrl.value.indexOf('?') >= 0
      ? returnUrl.value + '&payResult=' + payResult
      : returnUrl.value + '?payResult=' + payResult
  // 如果有配置，且是 http 开头，则浏览器跳转
  if (returnUrl.value.indexOf('http') === 0) {
    location.href = url
  } else {
    delView(unref(currentRoute))
    push({
      path: url
    })
  }
}
onMounted(async () => {
  if (route.query.returnUrl) {
    returnUrl.value = decodeURIComponent(route.query.returnUrl as string)
  }
})
</script>
